<template>
  <div>
    <!-- 查询条件 -->
    <el-row class="row-b10">
      <el-col
        v-for="(item, index) in formData"
        :key="index"
        :lg="6"
        :sm="12"
        :xs="12"
      >
        <slot v-if="item.type === 'slot'" :name="item.slotName" :row="item"></slot>
        <component
          v-else
          :is="item.el"
          v-model="form[item.prop]"
          :placeholder="item.placeholder"
          :class="item.class"
          :style="{ width: item.width }"
        >
          <component
            v-for="(subItem, subIndex) in item.subItems"
            :key="subIndex"
            :is="subItem.el"
            :label="subItem.label"
            :value="subItem.value"
          ></component>
        </component>
      </el-col>
    </el-row>
    <!-- 表格 -->
  </div>
</template>
<script>
export default {
  name: 'tablePage',
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    formData: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {}
    }
  },
  // computed: {
  //   form: {
  //     get: function() {
  //       return this.value
  //     },
  //     set: function(value) {
  //       this.value = value
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      const formValues = {}
      this.formData.forEach((item) => {
        formValues[item.prop] = item.defaultValue ? item.defaultValue : ''
      })
      this.form = formValues
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .row-b10 {
    .el-col{
      margin-bottom: 10px;
      padding: 0 5px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>